import {Layout} from 'antd'
import Self from './self'
import Menus from './menus'
import Music from './music'
import Chat from './chat'
const {Sider, Content} = Layout


export default class Index extends React.Component {

  constructor() {
    super();
    this.state = {
      systemChange: 0,
      updateList: 0
    };
  }

  render() {
    return (
    <Layout>
      <Sider
        breakpoint="lg"
        collapsedWidth="0"
        style={{height:'100vh'}}
      >
        <Self />
        <Menus />
      </Sider>
      <Layout>
          <Content 
          style={{display:'flex', padding:'20px 0 0 20px', position:'relative'}}
          >
            <Music systemChange={this.state.systemChange} updateList={this.state.updateList} />
            <Chat 
            sysChange={this.changeSong.bind(this)}  
            updateList={this.updateMusicList.bind(this)}  
            />
          </Content>
      </Layout>
    </Layout>
    );
  }

  changeSong() {
    this.setState({
      systemChange: this.state.systemChange += 1
    });
  }

  updateMusicList() {
    this.setState({
      updateList: this.state.updateList += 1
    });
  }

}